<!doctype html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>调试数据管理</title>
<link rel="stylesheet" type="text/css" href="../zui/css/zui.min.css">
</head>

<body>
	<div id="app">
		<div class="title-info">
			<div class="alert alert-primary">
				<div class="content">Tips：每次点击在线调试的发送请求后，都会默认保存一次请求的form、header、body数据，以备下次使用，在此页面可以管理这些数据</div>
			</div>
		</div>
		<table class="table table-bordered" id="onlineDebugParamTable">
			<thead>
			<tr><th>接口地址</th><th>参数配置</th><th>操作</th></tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in debugDataList" :key="item.id" :data-id="item.id" :data-index="index" >
					<td>{{item.key}}</td>
					<td>{{item.value}}</td>
					<td>
						<button class="btn btn-danger" type="button" v-on:click="deleteDebugData($event)">删除</button>
					</td>
				</tr>
				<tr>
					<td colspan="3" align="center">
						<button class="btn" type="button" v-on:click="btnRefreshList">　刷新　</button>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
<script src="../mg-ui/js/jquery-3.1.0.min.js"></script>
<script src="../zui/js/zui.min.js"></script>
<script src="../mg-ui/js/common.js"></script>
<script src="../mg-ui/js/mg-ui-cache-keys.js"></script>
<script src="../vue/vue.js"></script>
<script src="../mg-ui/js/toast.js"></script>

<script>
	var urlBase = "../../";
	var app = new Vue({
		el: '#app',
		data: {
			debugDataList: [],
		},
		mounted: function(){
			this.refreshList();
		},
		methods: {
			btnRefreshList: function(){
				this.refreshList();
				Toast.success("刷新成功！");
			},
			deleteDebugData: function(event){
				var tr = $(event.currentTarget).parents("tr");
				var index = tr.data("index");
				var delKey = app.debugDataList[index].key;
				var newDebugList = [];
				for(var i=0;i<app.debugDataList.length;i++){
					if(i != index) {
						newDebugList.push(app.debugDataList[i]);
					}
				}
				deleteStorage(delKey, function(data){
					app.debugDataList = newDebugList;
					Toast.success("删除成功！");
				});
			},
			refreshList: function () {
				getStorageLike(cacheKeys.pRequestObjStart, function(data){
					// console.log(data);
					app.debugDataList = data;
				});
			}
		}
	});
</script>

<style>
	#app{padding-top: 10px;}
</style>
</html>



